import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./login.module.less";
import { UserOutlined, LockOutlined, VerifiedOutlined } from "@ant-design/icons-vue";
import {
  $getCodeImg,
  $login,
} from "@/apis/user/user";
import { message } from "ant-design-vue";
import { useStore as useUserStore } from "@/store/user";
import { useStore as usePermissionStore } from "@/store/permission";
import { useRouter } from "vue-router";
export default defineComponent({
  name: 'login',
  setup() {
    const userStore = useUserStore();
    const permissionStore = usePermissionStore();
    const router = useRouter();
    const form = reactive({
      username: '',
      password: '',
      code: '',
      uuid: '',
    } as any);
    const codeUrl = ref("");
    // 获取验证码
    const requestCode = () => {
      $getCodeImg().then(res => {
        codeUrl.value = res?.data?.data?.img ? `data:image/gif;base64,${res.data?.data?.img}` : "";
        form.uuid = res?.data?.data?.uuid || "";
      })
    }
    // 登录
    const submit = async () => {
      if (!form.username) {
        message.error("请输入用户名或邮箱!");
        return;
      }
      if (!form.password) {
        message.error("请输入密码!");
        return;
      }
      if (!form.code) {
        message.error("请输入验证码!");
        return;
      }
      $login({
        username: form.username,
        password: form.password,
        code: form.code,
        uuid: form.uuid,
      }).then(res => {
        userStore.login({
          token: res?.data?.data?.token || "",
        }).then(() => {
          // 重登重新拉取路由
          permissionStore.state.pulled = false;
          router.push('/');
        })
      }).catch(() => {
        requestCode();
      })
    }
    onMounted(() => {
      requestCode();
    })
    return () => (
      <div class={styles.login}>
        <div class={styles['login-bg']}></div>
        <div class={styles.card}>
          <div class={styles['card-header']}>海伦陪练后台管理</div>
          <div class={styles['card-row']}>
            <a-input size="large" v-model:value={form.username} placeholder="用户名或邮箱" v-slots={{
              prefix: () => (
                <UserOutlined />
              )
            }} />
          </div>
          <div class={styles['card-row']}>
            <a-input size="large" type="password" v-model:value={form.password} placeholder="密码" v-slots={{
              prefix: () => (
                <LockOutlined />
              )
            }} />
          </div>
          <div class={styles['card-row']}>
            <a-input size="large" v-model:value={form.code} placeholder="验证码" v-slots={{
              prefix: () => (
                <VerifiedOutlined />
              ),
            }} />
            <div style={{ marginLeft: "20px" }} onClick={() => {
              requestCode();
            }}>
              <a-image width="100px" height="100%" src={codeUrl.value} preview={false}></a-image>
            </div>
          </div>
          <div class={styles['btns']}>
            <a-button size="large" class={styles['btn']} type="primary" onClick={() => { submit() }}>登录</a-button>
          </div>
        </div>
      </div>
    )
  }
})